<?php
    include '../functions.php';
    //判断当前用户是不是登录过
    checkLogin();
    
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Categories &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
  <script src="../static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
    <!-- 引入公共的顶部 -->
    <?php include "public/_navBar.php"?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>分类目录</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <div class="alert alert-danger" style="display:none">
        <strong>错误！</strong><span id="msg"></span>
      </div>
      <div class="row">
        <div class="col-md-4">
          <form id="cateForm">
            <h2>添加新分类目录</h2>
            <div class="form-group">
              <label for="name">名称</label>
              <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
              <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
            </div>
            <div class="form-group">
              <label for="classname">类名</label>
              <input id="classname" class="form-control" name="classname" type="text" placeholder="classname">
            </div>
            <div class="form-group">
              <button class="btn btn-primary" type="button" id="btnAdd">添加</button>
              <button class="btn btn-primary" type="button" id="btnEdit" style="display:none">编辑完成</button>
              <button class="btn btn-primary" type="button" id="btnCanle" style="display:none">取消编辑</button>
            </div>
          </form>
        </div>
        <div class="col-md-8">
          <div class="page-action">
            <!-- show when multiple checked -->
            <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none" id="delAll">批量删除</a>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-center" width="40"><input type="checkbox"></th>
                <th>名称</th>
                <th>Slug</th>
                <th>类名</th>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <tbody>
              
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入公共的侧边栏 -->
  <?php 
    $currentPage = 'categories';
    $currentPage1 = 'categories';
   ?>
  <?php include "public/_aside.php"?>

  <script src="../static/assets/vendors/jquery/jquery.min.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script>NProgress.done()</script>
</body>
<script>
    $(function(){
        //前端发送ajax请求数据
        $.ajax({
            type:"post",
            url:"api/_getCategoriesData.php",
            success:function(res){
                // console.log(res);
                //判断是否查询到数据
                if (res.code == 1){
                    var str = "";
                    var data = res.data;
                    //前端拿到数据之后,遍历输出在页面上
                    $.each(data,function(index,val){
                        str += `<tr data-categroyid = "${val.id}">
                                  <td class="text-center"><input type="checkbox"></td>
                                  <td>${val.name}</td>
                                  <td>${val.slug}</td>
                                  <td>${val.classname}</td>
                                  <td class="text-center">
                                    <a href="javascript:;" data-categroyid = "${val.id}" class="btn btn-info btn-xs edit">编辑</a>
                                    <a href="javascript:;" data-categroyid = "${val.id}" class="btn btn-danger btn-xs del">删除</a>
                                  </td>
                                </tr>`;
                    });
                    var tr = $(str);
                    tr.appendTo("tbody");
                }
            }
        });

        //点击添加事件发送ajax到后台
        $('#btnAdd').on("click",function(){
            //收集表单填写的信息
            var cateName = $("#name").val();
            var slug = $("#slug").val();
            var classname = $("#classname").val();
            //判断用户输入是不是为空或者正确
            if(cateName == ""){
                $("#msg").show().text("类名不能为空!");
                return;
            }
            if(slug == ""){
                $("#msg").show().text("类名不能为空!");
                return;
            }
            if(classname == ""){
                $("#msg").show().text("类名不能为空!");
                return;
            }
            //发送ajax请求后台数据
            $.ajax({
                type : "post",
                url : "api/_getCategory.php",
                data : $("#cateForm").serialize(),
                success : function(res){
                    // console.log(res);
                    var str = '';
                    //判断是否添加数据成功
                    if(res.code == 1){
                        str += `<tr>
                                  <td class="text-center"><input type="checkbox"></td>
                                  <td>${cateName}</td>
                                  <td>${slug}</td>
                                  <td>${classname}</td>
                                  <td class="text-center">
                                    <a href="javascript:;" class="btn btn-info btn-xs">编辑</a>
                                    <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
                                  </td>
                                </tr>`;
                        $('tbody').append(str);
                        console.log(str);
                    }
                    //添加完成后清空
                    $("#name").val("");
                    $("#slug").val("");
                    $("#classname").val("");
                    
                }
            });
        });

        /*
            定义一个全局变量,用于编辑和编辑完成使用 
         */
        var currentTr;

        //点击编辑操作
        $("tbody").on("click",".edit",function(){
            // 显示编辑完成 和取消编辑按钮  隐藏添加按钮
            $("#btnAdd").hide();
            $("#btnEdit").show();
            $("#btnCanle").show();
            //获取需要编辑的那条数据的内容
            //将当前编辑的那条数据保存起来
            currentTr = $(this).parents("tr");
            //获取编辑的id
            var cateId = $(this).attr("data-categroyid");
            //设置编辑的id传给编辑完成按钮
            $("#btnEdit").attr("data-categroyid",cateId); 
            //获取编辑的name
            var cateName = $(this).parents("tr").children().eq(1).text();
            //获取编辑的slug
            var slug = $(this).parents("tr").children().eq(2).text();
             //获取编辑的classname
            var classname = $(this).parents("tr").children().eq(3).text();
            //将获取的值赋值给表单文本框中
            var editname = $("#name").val(cateName);
            var editslug = $("#slug").val(slug);
            var editclassname = $("#classname").val(classname);
            
        });

        //编辑完成
        $("#btnEdit").on("click",function(){
            
            //获取需要编辑的那条数据的内容
            var cateId = $(this).attr("data-categroyid");
            var editname = $("#name").val();
            var editslug = $("#slug").val();
            var editclassname = $("#classname").val();
            // // 判断是否为空
            // if(editname==''){
            //     // 提示不能为空
            //     $("#msg").text('不能为空');
            //     $(".alert").show();
            //     return;
            // }
            //将修改的信息通过ajax传递给后台
            $.ajax({
                type:"post",
                url:"api/_getEditCategory.php",
                data:{
                    "cateId" : cateId,
                    "editname":editname,
                    "editslug":editslug,
                    "editclassname":editclassname
                },
                success:function(res){
                    //将后台编辑成功的数据在前端页面渲染
                    if(res.code == 1){
                      
                        //编辑完成时,隐藏编辑完成和取消编辑
                        $("#btnEdit").hide();
                        $("#btnCanle").hide();
                        $("#btnAdd").show();
                        //在清空之前先将获取的数据保存起来
                        var name = $("#name").val();
                        var slug = $("#slug").val();
                        var classname = $("#classname").val();
                        //清空输入框
                        $("#name").val("");
                        $("#slug").val("");
                        $("#classname").val("");
                        //把对应的数据动态的渲染到页面中
                        currentTr.children().eq(1).text(name);
                        currentTr.children().eq(2).text(slug);
                        currentTr.children().eq(3).text(classname);
                    }
                }
            });
        });
        //取消编辑
        $("#btnCanle").on("click",function(){
              //清空文本框中的信息
              $("#name").val("");
              $("#slug").val("");
              $("#classname").val("");
              //隐藏编辑完成和取消编辑按钮,显示添加按钮
              $("#btnEdit").hide();
              $("#btnCanle").hide();
              $("#btnAdd").show();

        });

        //全选
        $("thead input").on("click",function(){
            var allChecked = $(this).prop("checked");
            $("tbody input").prop("checked",allChecked);
        });


        //给每个子元素的复选框绑定事件
        $("tbody").on("click","input",function(){
            // alert(1);
            //被选中的复选框的个数
            var currentChecked = $("tbody input:checked").size();
            // console.log(currentChecked);
            //公共的复选框的个数
            var totalChecked = $("tbody input").size();
            // console.log(totalChecked);
            if(currentChecked == totalChecked){
                $("thead input").prop("checked",true);
            }else{
                $("thead input").prop("checked",false);
            }
            if(currentChecked >= 2){
                $("#delAll").show();
            }else{
                $("#delAll").hide();
            }
        });

        //删除操作
        $("tbody").on("click",".del",function(){
            // alert(1);
            //获取要删除的这条数据的id
            var categoryId = $(this).attr("data-categroyid");
            //获取要删除的这行
            var currentRow = $(this).parents("tr");
             //向后台发送请求
            $.ajax({
                type : "post",
                url : "api/_delCategory.php",
                data : {
                    "categoryId" : categoryId
                },
                success : function(res){
                    // console.log(res);
                    currentRow.remove();
                }
            });

        });

        //批量删除
        $("#delAll").on("click",function(){
            // alert(1);
            //获取要删除的id
            var ids = [];//用来存储删除数据的id
            //获取选中的复选框
            var inputChecked = $("tbody input:checked");
            //遍历这个伪数组,找到所有的被选中的id
            $.each(inputChecked,function(index,val){
                var id = $(val).parents("tr").attr("data-categroyid");
                ids.push(id);
                // console.log(ids);
            });
            $.ajax({
                type:"post",
                url : "api/_allDel.php",
                data : {
                    "ids" : ids
                },
                success : function(res){
                    // console.log(res);
                    if(res.code == 1){
                      inputChecked.parents("tr").remove();   
                    }
                }
            });
            // console.log(id);
        });
    });
</script>
</html>
